<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import {
	jeecgBootExExamAuditPassUsingPost,
	jeecgBootExExamAuditRejectUsingPost,
} from "@/genapi/exam";
import { useAsync } from "@/hooks/use-async";
import FileOtherUpload from "@/components/file-system/file-otherUpload.vue";
import { ref } from "vue";
import {
	getEnumOptionsField,
	GATE_STATUS_OPTIONS,
	RECORD_TYPE_OPTIONS,
} from "@/config/enum-options";

import { injectState } from "../state";
import { useUserStore } from "@/stores/user";

defineOptions({ name: "DetailDialog" });

const userStore = useUserStore();

const img = import.meta.glob("./assets/*.png", {
	import: "default",
	eager: true,
});

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read" | "create">();

const beforeClose = async () => {
	if (type.value === "create") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (
	_type: "write" | "read" | "create",
	value = {} as any,
) => {
	type.value = _type;
	model.value = JSON.parse(JSON.stringify(value)) as any;

	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<(typeof page.records.value)[0]>({});
const value = ref("");

const file = computed({
	get() {
		if (model.value.fileId) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.fileId = value?.[0]?.id;
	},
});

const title = computed(() => {
	if (type.value === "write") {
		return model.value.id ? "编辑" : "新建";
	} else {
		return `详情`;
	}
});

const selectOptions = ref([{ label: "员工", value: "1" }]);

function getCurrentDate(): string {
	const now = new Date();
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, "0");
	const day = String(now.getDate()).padStart(2, "0");

	return `${year}-${month}-${day}`;
}
model.value.time = getCurrentDate();
const children: FormDescChild[] = [
	{
		label: "",
		// prop: "status",
		rule: [{ required: false, message: "请输入", trigger: "blur" }],
		span: 2,
		fontSize: "16px",
		fontWeight: 700,
		formItem: () => (
			<div style="font-weight: 700; text-align: left;">基本信息</div>
		),
		descItem: `基本信息`,
	},
	{
		label: "所属单位",
		// prop: "status",
		rule: [{ required: false, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.orgCode} placeholder="请输入" />
		),
		descItem: () => `${model.value.orgCode ?? "-"}`,
	},
	{
		label: "姓名",
		// prop: "name",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.name} placeholder="请输入" />
		),
		descItem: () => `${model.value.name ?? "-"}`,
	},
	{
		label: "身份证号",
		// prop: "number",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.icNumber} placeholder="请输入" />
		),
		descItem: () => `${model.value.icNumber ?? "-"}`,
	},
	{
		label: "联系电话（用户账号）",
		// prop: "location",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.phone} placeholder="请输入" />
		),
		descItem: () => `${model.value.phone ?? "-"}`,
	},
	{
		label: "从业资格证号",
		// prop: "coordinate",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.credentials} placeholder="请输入" />
		),
		descItem: () => `${model.value.credentials ?? "-"}`,
	},
	{
		label: "从业资格证有效期",
		prop: "applyDate",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-date-picker
				v-model={model.value.creEndDate}
				clearable
				type="date"
				placeholder="从业资格证有效期"
				value-format="YYYY-MM-DD"
			/>
		),
		descItem: () => `${model.value.creEndDate ?? "-"}`,
	},
	{
		label: "工种类别",
		// prop: "status",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.workCategory}
				options={GATE_STATUS_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () => `${model.value.workCategoryText ?? "-"}`,
	},
	{
		label: "车辆类型",
		// prop: "status",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.status}
				options={GATE_STATUS_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(GATE_STATUS_OPTIONS, "label", model.value.status) ??
			"-",
	},
	{
		label: "驾驶证号",
		// prop: "location",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input v-model={model.value.location} placeholder="请输入" />
		),
		descItem: () => `${model.value.location ?? "-"}`,
	},
	{
		label: "驾驶证有效期",
		// prop: "status",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				v-model={model.value.status}
				options={GATE_STATUS_OPTIONS}
				clearable
				placeholder="请选择类型"
			/>
		),
		descItem: () =>
			getEnumOptionsField(GATE_STATUS_OPTIONS, "label", model.value.status) ??
			"-",
	},
	{
		label: "",
		// prop: "status",
		rule: [{ required: false }],
		fontSize: "16px",
		fontWeight: 700,
		span: 2,
		formItem: () => <div>资质照片</div>,
		descItem: `资质照片`,
	},
	{
		label: "驾驶证",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<div style={{ marginTop: "10px", marginLeft: "15px" }}>
				<FileOtherUpload
					onClick={() => {
						userStore.imgType = "驾驶证";
					}}
				/>
				<div
					style={{
						whiteSpace: "normal",
						width: "150px",
						color: "rgba(0, 0, 0, 0.25)",
					}}
				>
					支持bmp,jpg,png,tif格式图片可添加多个图片
				</div>
			</div>
		),
		descItem: () => `${model.value.park ?? "-"}`,
	},
	{
		label: "从业资格证",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<div style={{ marginTop: "10px", marginLeft: "15px" }}>
				<FileOtherUpload
					onClick={() => {
						userStore.imgType = "从业资格证";
					}}
				/>
				<div
					style={{
						whiteSpace: "normal",
						width: "150px",
						color: "rgba(0, 0, 0, 0.25)",
					}}
				>
					支持bmp,jpg,png,tif格式图片可添加多个图片
				</div>
			</div>
		),
		descItem: () => `${model.value.park ?? "-"}`,
	},
	{
		label: "",
		// prop: "status",
		rule: [{ required: false }],
		span: 2,
		fontSize: "16px",
		fontWeight: 700,
		formItem: () => <div>设置密码</div>,
		descItem: `设置密码`,
	},
	{
		label: "输入密码",
		// prop: "password",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				type="password"
				v-model={model.value.location}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.location ?? "-"}`,
	},
	{
		label: "确认密码",
		// prop: "password1",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				type="password"
				v-model={model.value.location}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.location ?? "-"}`,
	},
];

interface Option {
	key: number;
	label: string;
	initial: string;
}

const generateData = () => {
	const data: Option[] = [];
	const states = [
		"California",
		"Illinois",
		"Maryland",
		"Texas",
		"Florida",
		"Colorado",
		"Connecticut ",
	];
	const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
	states.forEach((city, index) => {
		data.push({
			label: city,
			key: index,
			initial: initials[index],
		});
	});
	return data;
};

const data = ref<Option[]>(generateData());
const value1 = ref([]);

const filterMethod = (query, item) => {
	return item.initial.toLowerCase().includes(query.toLowerCase());
};
const getChildren = () => {
	let updatedChildren = [...children];

	switch (type.value) {
		case "write": {
			const index = updatedChildren.findIndex((item: any) =>
				item.label.includes("车辆类型"),
			);
			if (index !== -1) {
				updatedChildren = [
					...updatedChildren.slice(0, index),
					...updatedChildren.slice(index + 6),
				];
			}
			break;
		}
		case "read":
			updatedChildren = updatedChildren.slice(0, updatedChildren.length - 3);
			break;
		case "create":
			break;
		default:
			break;
	}

	return updatedChildren;
};

const pass = async () => {
	await ElMessageBox.confirm(`确认通过吗？`, { type: "info", title: "提示" });
	await jeecgBootExExamAuditPassUsingPost({
		params: {
			cadetsId: model.value.id,
		},
	});
	ElMessage.success("操作成功");
	page.execute();
	dialogRef.value?.complete();
};

const reject = async () => {
	await ElMessageBox.confirm(`确认拒绝吗？`, { type: "info", title: "提示" });
	await jeecgBootExExamAuditRejectUsingPost({
		params: {
			cadetsId: model.value.id,
		},
	});
	ElMessage.success("操作成功");
	page.execute();
	dialogRef.value?.complete();
};
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="700px!"
	>
		<el-scrollbar style="height: 508px">
			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="getChildren()"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确定</el-button
			>
		</template>
		<template v-else-if="type === 'read'" #footer>
			<el-button @click="reject()">拒绝</el-button>
			<el-button type="primary" @click="pass()">通过</el-button>
		</template>
	</PromiseDialog>
</template>

<style lang="scss" scoped>
.trainingListBox {
	width: 100%;
	padding: 0px 30px;

	.listBoxTitle {
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
	}
}
</style>
